<%--
  Created by IntelliJ IDEA.
  User: null
  Date: 2022/4/27
  Time: 10:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<style>
    .parent {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
    .avatar {
        /* Rounded border */
        border-radius: 50%;
        height: 64px;
        width: 64px;
    }

    .avatar__image {
        /* Rounded border */
        border-radius: 50%;

        /* Take full size */
        height: 100%;
        width: 100%;
    }
    .div1 { grid-area: 1 / 2 / 2 / 5; }
    .div2 { grid-area: 2 / 2 / 6 / 5; }
</style>
<body>
<div class="parent">
    <div class="div1">
        <h3>
            <div class="avatar">
                <!-- Avatar image -->
                <img class="avatar__image" src="./img/1.jpeg" />
            </div>
        </h3>
    </div>
    <div class="div2">
        <h3>
            退出
        </h3>>
    </div>
</div>
</body>
</html>
